<template>
  <el-card>
    <template #header>
      <h3>工作日历</h3>
    </template>
    <div>
      <div style="text-align: right">
        <!-- 年 -->
        <el-select v-model="year" @change="changeEvent">
          <el-option
            v-for="item in yearArr"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <!-- 月 -->
        <el-select v-model="month" @change="changeEvent">
          <el-option
            v-for="item in 12"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
    </div>
    <el-calendar :value="value">
      <template #dateCell="{ date, data }">
        <div @click="changeDate(date)">
          <span>{{ data.day.split('-')[2] }}</span>
          <span
            v-if="
              data.type === 'current-month' &&
                (date.getDay() === 0 || date.getDay() === 6)
            "
          >休</span>
          <!-- <el-button @click="btnClick(date, data)">打印</el-button> -->
        </div>
      </template>
    </el-calendar>
  </el-card>
</template>

<script>
export default {
  name: '',
  // 接收父组件传递的值
  props: {
    value: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      // 下拉菜单的 的年
      yearArr: [],
      // 日历中的年
      year: 1970,
      // 月
      mouth: 10
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.year = newVal.getFullYear()
        this.month = newVal.getMonth() + 1
        // 产生年的事件范围
        const min = this.year - 6
        const max = this.year + 6
        const arr = []
        for (let i = min; i <= max; i++) {
          arr.push(i)
        }
        this.yearArr = arr
      }
    }
  },
  methods: {
    btnClick(date, data) {
      console.log(date, data)
    },
    changeDate(date) {
      this.$emit('update:value', date)
    },
    // 点击修改子组件的值 触发父组件的值
    changeEvent() {
      this.$emit('update:value', new Date(this.year + '-' + this.month + '-01'))
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar__header {
  display: none;
}
</style>
